<template>
  <div><button @click="fetchData">获取数据</button></div>
  <!-- <button @click="obj.a++">修改值</button>
  <button @click="setNewObj">修改新值</button>
  <p>{{ obj.a }},{{ obj.b }}</p>
  <p>{{ newObj.a }},{{ newObj.b }}</p>-->

  <p>
    <a-button @click="handleLoad">signLoad</a-button>
    <a-button @click="handleClose">close</a-button>
    <a-button @click="handleMatch">handleMatch</a-button>
  </p>

  <!-- <a-button type="primary" @click="getUUID">获取UUID</a-button> -->
  {{ uid }}
  <!-- <p>v5:{{ v5() }}</p> -->
  <!-- <p>v6:{{ v6() }}</p> -->

  <div id="loading-mask">
    <div class="loading-wrapper">
      <span class="loading-dot loading-dot-spin">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </span>
      <span id="loadText"></span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { toRaw, reactive, ref } from 'vue'
import loading from './LoadingService'
// import { cloneDeep } from 'lodash-es'
// import { v4 as uuidV4 },uuid from 'uuid'
import Singleton from './singleLoading'

// let obj = reactive({ a: 1, b: '单据信息' })
// let newObj = toRaw(obj)
// let deepClone = cloneDeep(obj)
// let jsonObj = JSON.parse(JSON.stringify(obj))

let uid = ref('')

/** 生成UUID */
// function getUUID() {
//   uid.value = uuidV4().replace(/-/g, '').toUpperCase()
// }
// function setNewObj() {
//   newObj.a++
//   deepClone.a++
//   jsonObj.a++

//   console.log(`newObj:${newObj.a},cloneDeep:${deepClone.a},jsonObj:${jsonObj.a}`)
// }

async function fetchData() {
  loading.open('数据加载中，请稍候')

  setTimeout(() => {
    loading.close()
  }, 2000)
}

function handleLoad() {
  Singleton.getInstance().show('数据处理中,请稍候！')
  setTimeout(() => {
    handleClose()
  }, 1500)
}
function handleClose() {
  Singleton.getInstance().close()
}
function handleMatch() {
  let a = Singleton.getInstance()
  let b = Singleton.getInstance()
  console.log('log内容match', a, b, a === b)
}
</script>
<style lang="less" scoped>
#loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  user-select: none;
}

.loading-wrapper {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 130px;
  text-align: center;
  transform: translate(-50%, -100%);
}

.loading-dot {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  font-size: 64px;
  transform: rotate(45deg);
  animation: antRotate 1.2s infinite linear;
}

.loading-dot i {
  position: absolute;
  display: block;
  width: 22px;
  height: 22px;
  background-color: #1890ff;
  border-radius: 100%;
  transform: scale(0.75);
  transform-origin: 50% 50%;
  opacity: 0.3;
  animation: antSpinMove 1s infinite linear alternate;
}

.loading-dot i:nth-child(1) {
  top: 0;
  left: 0;
}

.loading-dot i:nth-child(2) {
  top: 0;
  right: 0;
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.loading-dot i:nth-child(3) {
  right: 0;
  bottom: 0;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.loading-dot i:nth-child(4) {
  bottom: 0;
  left: 0;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

@keyframes antRotate {
  to {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}

@-webkit-keyframes antRotate {
  to {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}

@keyframes antSpinMove {
  to {
    opacity: 1;
  }
}

@-webkit-keyframes antSpinMove {
  to {
    opacity: 1;
  }
}
#loadText {
  position: relative;
  top: 20px;
  display: inline-block;
  width: 120px;
  width: 130px;
  color: #fff;
  text-align: center;
}
</style>
